<template>
  <div id="home">
    <el-card style="max-width: 888px">
      <template #header>用户登录</template>
      <el-form style="max-width: 800px" label-width="auto" class="demo-ruleForm" :size="'default'" status-icon>
        <el-form-item label="随机字符串">
          <el-input v-model="randomStr" disabled />
        </el-form-item>
        <div v-if="loginMethod == 'selfSignature'">
          <el-form-item label="签名字符串">
            <el-input v-model="signatureMessage" maxlength="130" minlength="130" show-word-limit>
              <template #prepend>
                0x
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="公钥">
            <el-input v-model="publicKey" maxlength="40" minlength="40" show-word-limit>
              <template #prepend>
                0x
              </template>
            </el-input>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="私钥">
            <el-input v-model="privateKey" maxlength="64" minlength="64" show-word-limit>
              <template #prepend>
                0x
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="签名">
            <el-input v-model="signatureMessage" maxlength="132" minlength="132" disabled />
          </el-form-item>

        </div>
        <el-form-item label="登录方式">
          <el-radio-group v-model="loginMethod">
            <el-tooltip class="box-item" effect="dark" content="用户自己对提供的随机字符串加签" placement="bottom">
              <el-radio value="selfSignature">自主加签</el-radio>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="用户可放心提供私钥，平台本地对字符串加签登录" placement="bottom">
              <el-radio value="plateformSignature">平台加签</el-radio>
            </el-tooltip>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login">
            登录
          </el-button>
          <el-tooltip class="box-item" effect="dark" content="本地创建自己的私钥信息" placement="bottom">
            <el-button type="warning">生成私钥</el-button>
          </el-tooltip>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getRandomStr, verifitySignature, isLogin } from '../network/login'
import { saveLocalData } from '../utils/utils'
import { ElMessage } from 'element-plus'
import { getPublicAddressByPrivateKey, signMessage } from "../utils/web3utils"
import { useRouter } from 'vue-router'

const router = useRouter();

// 登录方式
var loginMethod = ref("selfSignature")
// 随机字符串
var randomStr = ref("随机字符串")
// 自己的签名字符串
var signatureMessage = ref("")
// 用户私钥
var privateKey = ref("")
// 用户公钥
var publicKey = ref("")

const login = () => {
  if (loginMethod.value == "plateformSignature") {
    if (privateKey.value.length == 64) {
      publicKey.value = getPublicAddressByPrivateKey(privateKey.value)
      signatureMessage.value = signMessage(randomStr.value, privateKey.value)
    } else {
      ElMessage({
        message: "私钥错误",
        type: "warning"
      })
      return
    }
  }


  verifitySignature(publicKey.value, signatureMessage.value).then(res => {
    if (res.code == 200) {
      if (!publicKey.value.startsWith("0x")) {
        publicKey.value = "0x" + publicKey.value
      }
      saveLocalData("publicKey", publicKey.value, () => {
        ElMessage({
          message: "登录成功",
          type: "success"
        })
        router.push("/user/index")
      })
    } else {
      ElMessage({
        message: res.message,
        type: "warning"
      })
    }

  })

}

onMounted(() => {
  isLogin().then(res => {
    if (res.code == 200) {
      router.push('/user/index')
    } else {
      getRandomStr().then(res => { randomStr.value = res.data })

    }
  })
})
</script>

<style scoped>
#home {
  width: 100%;
  height: 100vh;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}
</style>